<!DOCTYPE html>
<html>
<head>
    <title>wangyihui</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .a1{
            width: 100%;
            height: 600px;
            background-color: antiquewhite;
            text-align: center;
            align-content: center;
            font: 50px 宋体 bold;
            color: violet;
        }
    </style>
</head>
<body>
    <div id="Application">
        <h1>{{title}}</h1>
        <div v-if="noLogin">账号: <input v-model="userName" type="text"></div>
        <div v-if="noLogin">密码: <input v-model="password" type="password"></div>
        <button v-on:click="click">{{buttonTitle}}</button>
        <button class="a1" onclick="shutwin()">关闭网页</button>
    </div>
    <script>
        function shutwin(){
            window.close();
            return;
        }
        // 关闭窗口
        const App={
            data(){
                return{
                title:"欢迎您:  未登录",
                noLogin:true,
                userName:"",
                password:"",
                buttonTitle:"登录"
            }
            },
            methods:{
                click(){
                    if(this.noLogin){
                        this.login()
                    }
                    else{
                        this.logout()
                    }
                },
                login(){
                    if(this.userName.length>0&&this.password.length>0){
                        this.title="欢迎您: "+this.userName
                        this.noLogin=false
                        this.buttonTitle="注销"
                        this.userName=""
                        this.password=""
                    }
                    else{
                        alert("请输入账号和密码")
                    }
                },
                logout(){
                    this.title="欢迎您:  未登录"
                    this.noLogin=true
                    this.buttonTitle="登录"
                }

            }
        }
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>
